<template>
  <svg :style="{ ...iconStyle, width: `${w}px`, height: `${h}px` }" aria-hidden="true" class="svg-icon">
    <use :xlink:href="symbolId"/>
  </svg>
</template>

<script lang="tsx" name="SvgIcon" setup>
import {computed, type CSSProperties} from "vue";

interface SvgProps {
  name: string; // 图标的名称 ==> 必传
  prefix?: string; // 图标的前缀 ==> 非必传（默认为"icon"）
  iconStyle?: CSSProperties; // 图标的样式 ==> 非必传
  fill?: string;
  w?: number;
  h?: number;
  hover?: string
}

const {
  prefix = "icon",
  name,
  hover = "",
  fill = "var(--navbar-icon-color)",
  w = 16,
  h = 16,
  iconStyle = {}
} = defineProps<SvgProps>()

const symbolId = computed(() => `#${prefix}-${name}`);
const hoverFill = computed(() => {
  if (hover) return hover
  return fill
})
</script>
<style lang="scss" scoped>
.svg-icon {
  @include fold();
  fill: v-bind(fill);

  &:hover {
    fill: v-bind(hoverFill)
  }
}
</style>
